<template>
    <div>
        <Button type="primary" @click="addModal" style="margin-top:20px;margin-bottom: 20px">新增</Button>
        <Table :columns="columns" :data="dataList" border></Table>
        <div style="position: relative">
            <Page style="text-align: right;padding-top: 10px;" :page-size="formData.rows" @on-page-size-change="pageSizeFn" @on-change="pageFn" :total="total" show-sizer show-total></Page>
        </div>
        <!--<user-add ref="myEdit" :editStatus="editStatus" :userId="userId" v-on:closeModal="closeModal"></user-add>-->
        <Modal
            v-model="notifyModel"
            title="修改用户名密码"
            @on-ok="ok">
            <div>
                <div>
                    <label>用户名：</label>
                    <Input type="text" disabled v-model="notify.username" placeholder="请输入..." style="width: 300px"/>
                </div>
                <div style="margin-top: 20px">
                    <label>新密码：</label>
                    <Input type="text"  v-model="notify.password" placeholder="请输入..." style="width: 300px"/>
                </div>

            </div>

        </Modal>
        <Modal v-model="editStatus"
               title="新增/修改用户"
               @on-ok="handleSubmit"
                @on-cancel="cancleModal">
            <div class="m-content">
                <Form ref="myData" :label-width="100" style="width: 900px"
                      :inline="true">
                    <FormItem label="用户名:" prop="posts_title">
                        <Input type="text" v-model="username" placeholder="请输入..." />
                    </FormItem>
                    <br>
                    <FormItem label="昵称:" prop="posts_title">
                        <Input type="text"  v-model="nickname" placeholder="请输入..." />
                    </FormItem>
                    <br>
                    <FormItem>
                        <div>创建用户的时候  密码默认为：<strong>Qwe!123qwe</strong></div>
                    </FormItem>
                    <br>
                    <!--<FormItem>-->
                    <!--<Button type="primary" @click="handleSubmit()">提交</Button>-->
                    <!--</FormItem>-->
                </Form>
            </div>
        </Modal>
    </div>
</template>
<script>
    import userAdd from '@/templates/user/user_add.vue'
    import qs from 'qs'
    import API from '../../config/api'
    export default {
        components:{
            userAdd
        },
        data() {
            return {
                notifyModel: false,
                notify:{
                    password: '',
                    id: '',
                    username:''
                },
                username: '',
                nickname: '',
                status: 0,
                typeData: [],
                columns: [
                    {
                        title: "用户名",
                        key: "username"
                    },
                    {
                        title: "昵称",
                        key: "nickname"

                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.addModal(params.row.id)
                                            }
                                        }
                                    },
                                    "修改"
                                ),
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.notifyPsw(params.row.id, params.row.username)
                                            }
                                        }
                                    },
                                    "修改密码"
                                ),h(
                                    "Button",
                                    {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.deletArticle(params.row.id)
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                dataList: [],
                total:0,
                editStatus: false,
                userId: '', //用户id
                formData:{
                    username: '',
                    nickname: '',
                    page: 1,
                    rows: 20
                }
            };
        },
        created(){
            this.query();
        },
        watch: {
            'editStatus': function (val) {
                if (val && this.userId){
                    this.getArticle()
                }
            }
        },
        methods: {
            notifyPsw(id, username){
                this.notify.id = id;
                this.notify.username = username;
                this.notifyModel = true;
            },
            ok(){
                if (!this.notify.password){
                    this.$Message.info('请输入新密码');
                    return;
                }
                this.getPublicKey()
            },
            handleSubmit(pwd){
                let param = {
                    id: this.notify.id,
                    password: pwd
                };
                this.axios.post(API.NOTIFY_PSW, qs.stringify(param)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.$Message.info('修改成功');
                        this.notifyModel = false;
                    }else{
                        this.$Message.info(data.msg);
                        this.notifyModel = false;
                    }
                })
            },
            getPublicKey(){
                this.axios.post(API.GET_PUBLIC_KEY).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        const entry=new JSEncrypt();
                        entry.setPublicKey(data.data);
                        const pwd= entry.encrypt(this.notify.password);
                        this.handleSubmit(pwd)
                    }
                })
            },
            chooseTime() {

            },
            deletArticle(id){
                let data = {
                    id : id
                }
                this.axios.post(API.USER_DELET, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.query()
                        this.$Message.info('删除成功');
                    }else{
                        this.$Message.error(data.msg);
                    }
                })
            },
            query(){
                this.axios.post(API.USER_LIST, qs.stringify(this.formData)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.total = data.data.totalCount;
                        this.dataList = data.data.dataList;
                    }
                })
            },
            pageSizeFn(size){
                this.formData.rows = size;
                this.query();
            },
            pageFn(num){
                this.formData.page = num;
                this.query();
            },
            searchQuery() {
                this.formData.page = 1;
                this.query();
            },
            addModal(id){
                this.editStatus = true;
                if (typeof id === 'string' || typeof id === 'number'){
                    this.userId = id;
                }else {
                    this.userId = ''
                }
            },
            closeModal(){
                this.editStatus = false;
                this.formData.page = 1;
                this.query();
            },
            cancleModal(){
                this.username = '';
                this.nickname = ''
            },
            notifyArticle(){
                if (!this.username) {
                    this.$Message.error('请请输入用户名');
                    return;
                }
                let formData = new FormData();
                formData.append('username', this.username);
                formData.append('nickname', this.nickname);
                formData.append('status', this.status);
                formData.append('id', this.userId);
                this.axios.post(API.USER_UPDATE, formData).then(response => {
                    if (response.data.code == 200) {
                        this.$Message.success('更新成功！');
                        this.cancleModal()
                        this.editStatus = false;
                        this.query();
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            saveContentInfo() {
                let vm = this;
                if (!this.username){
                    this.$Message.error('请请输入用户名');
                    return ;
                }
                let formData = new FormData();
                formData.append('username', this.username);
                formData.append('nickname', this.nickname);
                formData.append('status', this.status);
                this.axios.post(API.USER_ADD, formData).then(response => {
                    if (response.data.code == 200) {
                        this.$Message.success('创建成功！');
                        this.cancleModal()
                        this.editStatus = false;
                        this.query();
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                })
            },
            handleSubmit() {
                if (this.userId){
                    this.notifyArticle();
                } else {
                    this.saveContentInfo();
                }
            },
            getArticle(){
                let data = {
                    id: this.userId
                }
                this.axios.post(API.USER_INFO, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        let netData = data.data;
                        this.username = netData.username;
                        this.nickname = netData.nickname;
                    }
                })
            },
        }
    };
</script>
<style scoped>
    .top {
        margin: 30px 0;
    }
</style>
